<template>
  <div class="note-header">
    <div class="action-box">
      <dic class="note-action">
        <el-icon><Download /></el-icon>
        <b>下载</b>
        <b class="action-conut">0</b>
      </dic>
      <dic class="note-action">
        <el-icon><Star /></el-icon>
        <b>收藏</b>
        <b class="action-conut">0</b>
      </dic>
      <dic class="note-action">
        <el-icon><Share /></el-icon>
        <b>Fork</b>
        <b class="action-conut">0</b>
      </dic>
    </div>

    <h3>我是标题我是标题</h3>
    <label>作者:</label><a>test</a>
    <label>笔记本:</label><a>默认笔记本</a>
    <label>最后编辑于:</label><label>2023-1-1</label>
    <div style="height: 8px;"></div>
    <label>标签:</label>
    <el-tag size="small">Tag 1</el-tag>
    <el-tag size="small">Tag 2</el-tag>
    <el-tag size="small" type="info" effect="plain"><el-icon><Plus /></el-icon> 添加标签</el-tag>

    <div style="position: absolute;right: 0;bottom: 16px;"><el-button @click="StartEdit">编辑正文</el-button></div>
    
  </div>
  <div v-if="!editMode" v-higelight v-html="valueHtml"></div>

  <div v-if="editMode">
    <el-button type="primary" :icon="Select" @click="SaveEdit">保存</el-button>
    <el-button :icon="Tickets">保存草稿</el-button>

    <div class="editor-box">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" 
        :defaultConfig="toolbarConfig" mode="default"/>
      <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml"
        :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, shallowRef } from 'vue';

import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common';
import hljs from "highlight.js";

import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

import { Select, Tickets } from '@element-plus/icons-vue'

//定义指令，自动使用highlight.js渲染所有<pre><dode>代码块
const vHigelight = {
  mounted(el :any) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block: HTMLElement)=>{
      block.setAttribute('style', 'margin-top: 8px;');
      hljs.highlightBlock(block)
    })
  }
}

const editMode = ref(true);

const editorRef = shallowRef();
const valueHtml = ref('');

const toolbarConfig = {
  excludeKeys: []
}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

function SaveEdit() {
  editMode.value = false;
  valueHtml.value = editorRef.value.getHtml();
}
function StartEdit() {
  editMode.value = true;
}
</script>

<style scoped lang="scss">
@import '../../../assets/variable.scss';
.note-header {
  padding: 16px 0px 16px 0px;
  margin-bottom: 16px;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  //border-image: radial-gradient($darker-border 60%, $lightest-border ) 1; 

  h3 {
    margin-bottom: 8px;
    color: $text0;
    font-size: 20px;
  }

  label {
    margin-right: 8px;
    font-size: 14px;
    color: $text2;
  }

  a {
    margin-right: 20px;
    font-size: 14px;
    color: $blue-1;
    cursor: pointer;

    &:active {
      color: $blue0;
    }
  }

  span {
    margin-right: 8px;
    cursor: pointer;

    &:active {
      color: $blue-1;
    }
  }
}

.action-box {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 0px;
  color: $text0;

  .note-action {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    //border: $darker-border solid 1px;
    border-radius: 5px;

    i {
      margin-right: 2px;
    }

    b {
      font-size: 13px;
      font-weight: 500;
    }

    .action-conut {
      padding-left: 8px;
      margin-left: 8px;
      //border-left: $darker-border solid 1px;
    }
  }
}

.editor-box {
  margin-top: 8px;
  //border: $base-border solid 1px;
}

pre {
  margin: 8px 0px !important;
}
</style>